Blog użytkownika:Akodone/Poradnik CSS
Długo zastanawiałam się, gdzie to publikować, ale jednak dam to na bloga. Kolejne części będę dodawać prawdopodobnie w niedziele oraz w dni, w które akurat będzie mi się chciało. Pamiętajcie, że wszystkie sugestie możecie mi zgłaszać w komentarzach! Chcesz być na bieżąco z nowymi częściami poradnika? Koniecznie zaobserwuj ten wąteczek! Tu masz ankietę, człeku. c: Czy ten poradnik jest przydatny? Tak Nie Pół na pół Nie wiem/Nie mam zdania Witam wszystkich w poradniku edycji kodów CSS! Jeśli chciałbyś dodać ramkę na profil, zmienić wygląd tekstu czy nadać unikalny wygląd elementom na swoim profilu, ale nie wiesz jak, to trafiłeś doskonale! Jeśli zaś trafiłeś tu zupełnie przypadkowo, też zapraszam do przeczytania :D =Na sam początek= Podstawa podstaw — VisualEditorowi mówimy stanowcze NIE. W tym edytorze edycja kodów jest niemożliwa. Znaczy... jest opcja przełączenia na kod źródłowy, ale jest niewygodna. A do tego VisualEditor lubi psuć kody we wszelkiej formie. Dlatego, zanim w ogóle przystąpisz do bawienia się z kodami, musisz włączyć edytor klasyczny. A gdy już go włączysz, przełącz go na edytor źródłowy.W celu włączenia edytora źródłowego możesz dodać na końcu adresu strony ?action=edit&useeditor=source. Efektów swojej pracy nie sprawdzaj też, przełączając na edytor wizualny, tylko przez włączenie podglądu. Dzięki temu zobaczymy wszystko tak, jak ma być (na edytorze wizualnym nie wyświetlają się m. in. szablony i tabbery), a do tego mamy pewność, że żaden kod się nie zepsuje. Pamiętam bowiem, że gdy sama sprawdzałam efekty mojej pracy w edytorze wizualnym, fragmenty kodu lubiły sobie potem znikać. Protip: Żeby edytor wizualny nas nie rozpraszał, możemy go wyłączyć w preferencjach. Ja mam go wyłączony i pracuję tylko na źródłowym, co jest naprawdę wygodne. =Kody do zmian na stronie= thumb|Na czerwono zaznaczyłam obszar działania kodów. Czyli takie kody, które umożliwiają nam zmianę tekstu, dodanie ramek itd. i działają tylko w obrębie strony. Screen po prawej chyba lepiej to wytłumaczy. Uwaga: To nie jest poradnik wikitekstu. Ściągawkę z wikitekstu można znaleźć tutaj (choć gwarantuję, że jak dłużej posiedzicie w edytorze źródłowym, to będziecie mieli wikitekst w małym paluszku). Niektóre rzeczy, które można zrobić także wikitekstem, też się tutaj pojawią, bo będą nam potrzebne potem. Jak wyglądają kody? Wszystkie kody do zmian w obrębie strony, które przedstawię w tym poradniku, mają taki schemat: TEKST <--- Ważne jest, żeby zamknąć kod. Wiele osób tego nie robi, przez co większe kody im się psują. Zamiast "div" czasami będę stosować element "span". Głównie, gdy będę wprowadzać zmiany tylko w tekście i nie będę dodawać żadnych ramek. Ale też nie będę tłumaczyć dogłębnie różnicy między tymi dwoma elementami, jeśli ktoś jest tym zainteresowany, zapraszam do poczytania o tym w Internecie ^^ Umieszczę tu też wzmiankę o tabberach i ankietach, które mają swój własny kod, ale niewiele różni się on od większości kodów. =Zmiana wyglądu tekstu= Zmiana koloru tekstu Tak, postanowiłam zacząć od najprostszego, czyli od zmiany koloru tekstu! Już na wstępie polecę Wam stronkę, na której można sobie łatwo dobrać kolor: Paletton. Warto także zajrzeć na listę kolorów na Wikipedii. A więc, jeśli chcemy zmienić kolor tekstu, używamy tego kodu: TEKST Na przykład, chcąc zmienić kolor tekstu na jasnozielony możemy wpisać: TEKST A otrzymamy: TEKST. Możemy też wpisać: TEKST Otrzymany efekt będzie taki sam: TEKST. Osobiście polecam używać wartości szesnastkowych, bo podczas gdy ilość angielskich nazw kolorów jest mocno ograniczona, ich jest naprawdę mnóstwo. Tylko pamiętajcie o znaku "#", bo inaczej zmiana koloru Wam nie zadziała! (Oczywiście tylko w przypadku wartości szesnastkowych). Zmiana rozmiaru tekstu A więc, jeśli chcemy zmienić rozmiar tekstu, musimy użyć tego kodu: TEKST Chcąc zwiększyć rozmiar czcionki do 20px, wpisujemy ten kod: TEKST Otrzymamy wtedy: TEKST Oprócz powiększenia tekstu możemy go też oczywiście pomniejszyć :D Tylko trzeba znaleźć odpowiedni rozmiar. Rozmiar tekstu możemy zmieniać nie tylko za pomocą pikseli, ale myślę, że każdemu początkującemu piksele wystarczą ;) Ja sama też używam praktycznie tylko ich. Ale miałam jeszcze wymienić siedem wartości absolutnych, więc jedziemy z tym koksem! Wartości absolutne wymienione od tych najbardziej pomniejszających tekst do tych najbardziej go powiększających: *xx-small *x-small *small *medium *large *x-large *xx-large I tu wpisujemy tak samo: TEKST Otrzymamy: TEKST. Tu dam porównanie wszystkich wartości absolutnych i normalnego tekstu: *normalny *xx-small *x-small *small *medium *large *x-large *xx-large Czyli widać, że "medium" jest najbardziej zbliżone do normalnego tekstu. Są jeszcze dwie inne opcje zmieniania rozmiaru tekstu: *TEKST — TEKST *TEKST — TEKST Chcąc w ten sposób bardziej powiększyć/pomniejszyć tekst musimy znaczniki na początku i końcu powielić, np. TEKST (TEKST). Ale to dosyć czasochłonne tak ciągle pisać lub kopiować to "big" czy "small", czyż nie? :D Zmiana czcionki tekstu To chyba moja ulubiona część zabawy z tekstem. Daje dużo możliwości, a jak później połączymy wszystkie modyfikacje tekstu w jedną całość, otrzymamy idealny nagłówek. Gdy chcemy zmienić czcionkę tekstu, stosujemy taki kod: Tekst Pokażę Wam dwa przykłady czcionek: Segoe print, która jest chyba dosyć popularna na wiki, oraz Lobster, którą są napisane chociażby nicki użytkowników na profilu. Czcionka Segoe print Czcionka Segoe print Czcionka Lobster Czcionka Lobster Oczywiście jest mnóstwo innych czcionek :D Tylko uwaga! Nie wszystkie działają na wiki. I są takie czcionki, które działają na każdej wiki i nie trzeba ich importować, są też takie, które zaimportowano do MediaWiki i można z nich śmiało korzystać. Tu daję listę czcionek zaimportowanych: *Lobster *Indie Flower *Zeyada *Cookie *Jeśli o jakiejś zapomniałam, to zapraszam do sprawdzenia MediaWiki:Wikia.css. Pamiętaj, że jeśli chcesz, by jakaś czcionka była dostępna na wiki, zawsze możesz napisać do admina (admina, nie moda, mod nie może edytować MediaWiki) z prośbą o import. Cień tekstu Aby zrobić cień tekstu, posłużymy się właściwością text-shadow. Ale jak ona właściwie wygląda? Podstawowy kod wygląda tak: Tekst Przesunięcia oraz rozmycie podajemy w odpowiedniej jednostce, ja jak zwykle preferuję piksele. A kolory tak jak w zmianie koloru tekstu. Jeśli chcemy zrobić cień, który nie będzie przesunięty w żaden sposób, wartości obu przesunięć muszą być równe zero. Tekst Tekst Jak widać, wyżej ustawiłam rozmycie cienia również na zero, co nie dało zbyt epickiego efektu. Dlatego teraz damy prawie ten sam kod, tylko jeszcze rozmyjemy nieco cień. Tekst Tekst Znacznie lepiej, nie? Teraz zobaczmy w takim razie, co da nam przesunięcie cienia. Gdy chcemy przesunąć cień w prawo lub w dół, posługujemy się wartościami dodatnimi. Gdy chcemy przesunąć cień w lewo lub w górę, musimy posłużyć się wartościami ujemnymi. Tu pokażę efekt przesunięcia cienia o 10 pikseli w różnych kierunkach. Rozmycie cienia ustawię na 0, dzięki czemu wszystko będzie lepiej widać. Przy okazji nieco powiększę czcionkę, także dla lepszej widoczności. Można także dodawać parę cieni naraz. Aby nałożyć dwa cienie, po pierwszym cieniu trzeba dać przecinek. Tak to wygląda we wzorze ogólnym: Tekst Na przykład, gdy chcemy dodać dwa cienie rozmyte na 10px, jeden niebieski w górnym lewym rogu, a drugi czerwony w prawym dolnym rogu, używamy tego kodu: Tekst Otrzymamy: Tekst Ciekawe byłoby też, gdyby nałożyć dwa cienie na siebie. Zobaczymy, co da nałożenie niebieskiego cienia o mniejszym rozmyciu na czerwony cień o większym rozmyciu: Tekst Otrzymamy: Tekst Jakby coś, powiększyłam lekko tekst dla większej widoczności, odnotowałam to także w kodzie dla Was ;) Cienie do tekstu dają nam naprawdę dużo możliwości, tyle, że nie jestem w stanie przedstawić ich tu wszystkich. Polecam Wam poeksperymentować nieco, a na pewno otrzymacie piękne efekty. BONUS! Przedstawiam Wam napis z Dżemożercy Wikia, w którym pokazano jeden z efektów użycia wielu cieni. Zapraszam Was do rozszyfrowania, w jaki sposób powstał taki efekt, jak niżej. Tylko bez oszustw! ;) Dla lepszej widoczności biała ramka: Dżemożercy Wikia Styl tekstu Nie wiem do końca, jak to określić, bo nie jest to żadna zmiana czcionki ani nic w tym stylu. Za pomocą zmiany stylu tekstu możemy sprawić, by tekst był napisany kursywą lub stał się ukośny. Normalnie tekst nie jest przechylony, a wartość właściwości font-style to normal. Tutaj jest tekst. Tutaj jest tekst. Jak widać, tekst nam się tylko powiększył. Jeśli chcemy, by tekst był zapisany kursywą, dajemy tek kod (z wyjątkiem oczywiście font-size, bo to daję tylko dla lepszego zaprezentowania tekstu): Tutaj jest tekst. Tutaj jest tekst. Tekst ukośny otrzymujemy w ten sposób: Tutaj jest tekst. Tutaj jest tekst. Nie widać szczególnej różnicy między kursywą a oblique, ale ona tam jest ;) Uwaga! Kursywę na stronie możemy także osiągnąć za pomocą wikitekstu. Dlatego font-style jest bardziej przydatne w modyfikacjach osobistego CSSu. (O osobistym CSSie będzie później). Grubość tekstu Do zmian grubości tekstu należy użyć właściwości font-weight. Tutaj będziemy się posługiwać wartościami normal, bold, dwiema wartościami relatywnymi: lighter i bolder oraz pełnymi setkami od 100 do 900. Ogólny kod: TEKST Tutaj podaję wszystkie wartości, o których pisałam wyżej: *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST Relatywne: *TEKST — TEKST *TEKST — TEKST Wariant Za pomocą właściwości font-variant możemy zmienić wariant tekstu. Istnieją dwie wartości — normal (czyli domyślna) oraz small-caps. Za pomocą wartości small-caps możemy otrzymać kapitaliki, zakładając, że nie pomyliłam nazw. Ogólny kod: TEKST A tutaj porównanie wartości normal i small-caps (dla lepszej widoczności tekst został też powiększony: *Tekst normalny — Tekst normalny *Tekst ze small-caps — Tekst ze small-caps Aż jestem ciekawa, jak wygląda small-caps przy czcionce Lobster, więc aż to tutaj sprawdzę: Tekst ze small-caps w czcionce Lobster Tekst ze small-caps w czcionce Lobster Dobra, dosyć słabo... Ale myślę, że w innych czcionkach mogłoby wyjść naprawdę spoko. Umieszczanie tekstu dokładnie tam, gdzie chcemy... ...czyli właściwość text-align. Czytając opis właściwości na Webkodzie, widzę, że jest dużo różnych wartości, ale skupimy się na kilku podstawowych, które w zupełności nam wystarczą. Podstawowy kod wygląda tak: TEKST Wartości, których będziemy używać, to left, right, center i justify, czyli po kolei wyrównanie w lewo, prawo, do środka i wyjustowanie (wyrównanie do obu krawędzi). Zrobię tabelkę, na której powinno wszystko ładnie widać: I jak Wam się podoba? Przy okazji, jeśli przyjrzycie się uważnie, zobaczycie, że nagłówki w tabelce i kody też są wyśrodkowane. Tak, zrobiłam to tym samym kodem, który Wam zaprezentowałam ;) Podkreślenia, skreślenia i inne dekoracje A teraz czas na właściwości text-decoration i jej właściwości cząstkowe! To będzie nieco bardziej skomplikowane, ale wierzę, że sobie poradzicie. text-decoration-line Za pomocą tej właściwości wybieramy rodzaj interesującej nas linii dekoracyjnej. Mamy do wyboru trzy wartości: underline, overline i line-through (no i jeszcze domyślną none, jakby coś). Ogólny kod: TEKST A tu wartości: *Podkreślony tekst — Podkreślony tekst *Tekst udekorowany z góry — Tekst udekorowany z góry *Skreślony tekst — Skreślony tekst UWAGA! Możemy udekorować nasz tekst więcej niż jedną linią. Wtedy wszystkie linie podajemy obok siebie, bez przecinka, np. TEKST da nam tekst skreślony oraz z linią nad nim: TEKST. text-decoration-style Dzięki tej właściwości możemy określić styl linii dekoracyjnej. Pokażę wszystkie style na tekście podkreślonym. Ogólny kod: TEKST Wartości: *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST text-decoration-color Tutaj możemy zmienić kolor naszej linii dekoracyjnej. I tutaj, tak jak przy zmianie koloru tekstu, odsyłam do strony Paletton, bo naprawdę dobrze się tam dobiera kolory. Ogólny kod: TEKST I tu przykłady, pokazane na podkreśleniu: *TEKST — Czerwone podkreślenie *TEKST — Zielone podkreślenie text-decoration Skoro znamy wszystkie właściwości związane z naszą linią dekoracyjną, to możemy je połączyć! Tutaj jak zwykle prezentuję ogólny kod: TEKST Tutaj trzy randomowe przykłady: *TEKST — TEKST *TEKST — TEKST *TEKST — TEKST Jak widać, możliwości jest naprawdę wiele. Naprawdę trudno byłoby wymienić wszystkie (podobnie jak w przypadku cieni), więc jak na razie pozostańmy przy tym. =Przypisy= =Źródła= *Webkod — Naprawdę polecam tę stronkę, bo jest tam opisanych wiele kodów w przystępny sposób. Nieraz się także nią inspirowałam w pisaniu tego poradnika. Kategoria:Pomoc Kategoria:Wpisy na blogach